<template>
  <div class="home">
  <el-carousel indicator-position="none" height="1000px">
    <el-carousel-item v-for="(item,index) in image" :key="index">
      <img :src="item.img" alt="">
    </el-carousel-item>
  </el-carousel>
 <div class="footer">
   <div class="footer-menu-left">
    <div class="footer-menu-left-top">
     <i class="product">产品服务</i>
     <p ref='liu'>
     <i class="el-icon-office-building"></i><br>
     地产
     </p>
     <p ref='liu6'>
     <i class="el-icon-share"></i><br>
     农业
     </p >
     <p ref='liu1'>
     <i class="el-icon-setting"></i><br>
     物业
     </p>
     <p ref='liu2'>
     <i class="el-icon-school"></i><br>
     酒店
     </p>
     <p ref='liu3'>
     <i class="el-icon-fork-spoon"></i><br>
     餐饮
     </p>
     <p ref='liu4'>
     <i class="el-icon-s-custom"></i><br>
    客户中心
     </p>
     <p ref='liu5'>
     <i class="el-icon-more"></i><br>
     其他  
     </p>
    </div>
    <div class="footer-menu-left-button"><br>
      <a href="">
        <img src="../assets/common/13.png" alt="" class="img-set">
      </a>
    </div>
   </div>
    <div class="footer-menu-right">
      <div class="footer-menu-right-left">
        <img src="../assets/common/6.jpg" alt="">
        <h3>嘉兴森林城市</h3>
        <i>森林城市,回话ad尽快哈进口电话你是否健康滑石粉接电话司法局开始健康的撒发红就是的</i>
        <br>
        <a href="">了解更多></a>
      </div>
      <div class="footer-menu-right-right">
        <img src="../assets/common/8.jpg" alt="">
        <h3>嘉兴森林城市</h3>
        <i>森林城市,回话ad尽快哈撒即可换地方石粉接电话司法局开始健康的撒发红就是的</i>
        <br>
        <a href="">了解更多></a>
      </div>
    </div>
  </div>
  </div>
</template>

<script>

export default {
data(){
  return{
    image:[
      {img:require('../assets/common/10.jpg')},
      {img:require('../assets/common/1.jpg')},
      {img:require('../assets/common/2.jpg')},
      {img:require('../assets/common/3.jpg')},
      {img:require('../assets/common/4.jpg')},
    ],
    scale:1.5,
    time:1.2
  }
},
mounted(){

 // 监听页面滚动
        window.addEventListener('scroll', ()=> {
          // 获取页面滚动出屏幕的距离
          let top = document.documentElement.scrollTop
       
          // 判断卷出的距离是否大于 2000
          if (top >= 500) {
            // 让小火箭出现
         this.$refs.liu.style.transform=`scale(${this.scale})`
         this.$refs.liu.style.transition=`${this.time}s`
         this.$refs.liu1.style.transform=`scale(${this.scale})`
         this.$refs.liu1.style.transition=`${this.time}s`
         this.$refs.liu2.style.transform=`scale(${this.scale})`
         this.$refs.liu2.style.transition=`${this.time}s`
         this.$refs.liu3.style.transform=`scale(${this.scale})`
         this.$refs.liu3.style.transition=`${this.time}s`
         this.$refs.liu4.style.transform=`scale(${this.scale})`
         this.$refs.liu4.style.transition=`${this.time}s`
         this.$refs.liu5.style.transform=`scale(${this.scale})`
         this.$refs.liu5.style.transition=`${this.time}s`
         this.$refs.liu6.style.transform=`scale(${this.scale})`
         this.$refs.liu6.style.transition=`${this.time}s`
          }
        })
}

}
</script>
<style lang="scss" scoped >
.footer{
  width: 100%;
  height:100%;
  display: flex;
  position: relative;
  overflow:hidden;
  .footer-menu-left{
    flex:1;
 .footer-menu-left-top{
  width: 60vw;
  height: 170px;
  // background-color: skyblue;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .product{
    font-size: 30px;
    color: #999;
  }
  p{
    font-size: 18px;
    display: inline-block;
    color: #999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
p:hover{
  transform:scale(1.2) !important;
}
  }
  .footer-menu-left-button{
    width: 60vw;
    height: 170px;
    .img-set{
     width: 100%;
     height: 90%;
    }
  }
  }
  .footer-menu-right{
    flex:1;
    display: flex; 
    align-items:center;
    transition: 1s;
    // transform: translateY(50%);
    margin-bottom: 41px;
    overflow:hidden;
    i{
      color: #999;
    }
    a{
      color: orange;
      text-decoration: none;
    }
     .footer-menu-right-left {
      padding:0 10px 0 10px;
      // overflow: hidden;
      flex:1;
        
     }
     .footer-menu-right-right{
         flex:1;
        // overflow: hidden;
     }
    img{
      width: 100%;
      height: 70%;
    }
  }
    // .footer-menu-right:hover{
    //   // align-items:flex-start;
    // transform: translateY(0%);
    // margin-bottom: 50px;
    // }
}
</style>